import { Drawer, Button, Form, Input, Select, Radio, Row } from 'antd';
import React, { useCallback } from "react";

const { Option } = Select;

const componentModle = {
    id: "1430819314472525824",
    name: "HTTP组件转发",
    type: "HTTP_CLIENT",
    state: {
        text: "已启动",
        value: "enabled"
    },
    creatorId: "1199596756811550720",
    createTime: 1629968882563,
    configuration: {
        baseUrl: "http://192-168-22-65-8082.proxy.jetlinks.cn:5083/"
    },
    shareCluster: true,
    typeObject: {
        name: "HTTP客户端",
        text: "HTTP客户端",
        value: "HTTP_CLIENT"
    }
};

function DrawForm(props) {
    const [form] = Form.useForm();
    form.setFieldsValue({
        name: props.data.title === "新增" ? '' : props.data.data.name,
        type: props.data.title === "新增" ? '' : props.data.data.type,
        shareCluster: props.data.title === '修改' ? (props.data.data.shareCluster ? 1 : 0) : -1
    })
    const handleSubmit = useCallback((values, type) => {
        props.data.handleFinish({
            ...componentModle,
            name: values.name,
            type: values.type,
            shareCluster: values.shareCluster,
            id: props.data.title === '修改' ? props.data.data.id : componentModle.id + Date.now(),
            createTime: Date.now()
        }, props.data.title);
    }, [])

    return (
        <Drawer title={`${props.data.title}网络组件`}
            width={500}
            destroyOnClose={true}
            placement="right"
            onClose={props.data.handleClose}
            visible={props.data.visible}
            footer={
                <Row justify='end'>
                    <Button style={{ marginRight: '10px' }}
                        onClick={props.data.handleClose}>关闭</Button>
                    <Button type='primary' onClick={form.submit}>保存</Button>
                </Row>
            }>
            <Form
                form={form}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                labelAlign='left'

                onFinish={handleSubmit}>
                <Form.Item
                    name='name'
                    label='组件名称'
                    rules={[
                        {
                            required: true,
                            message: '请输入组件名称'
                        }
                    ]}>
                    <Input defaultValue={props.data.title === "新增" ? '' : props.data.data.name} />
                </Form.Item>
                <Form.Item
                    name='type'
                    label='组件类型'
                    rules={[
                        {
                            required: true,
                            message: '请选择组件类型'
                        }
                    ]}>
                    <Select allowClear disabled={props.data.typeVisibal}
                        defaultValue={props.data.title === "新增" ? '' : props.data.data.type}>
                        {
                            props.data.tags.map(tag => <Option
                                value={tag.id} key={tag.id}>
                                {props.data.title === "新增" ? tag.name : props.data.data.typeObject.name}
                            </Option>)
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    name='shareCluster'
                    label='集群'
                    rules={[{
                        required: true,
                        message: '请选择是否为集群'
                    },]}>
                    <Radio.Group defaultValue={props.data.title === '修改' ? (props.data.data.shareCluster ? 1 : 0) : -1}>
                        <Radio value={1}>共享配置</Radio>
                        <Radio value={0}>独立配置</Radio>
                    </Radio.Group>
                </Form.Item>
            </Form>
        </Drawer>
    );
}

export default DrawForm